<template>
  <div class="app-container statisticsView">
    <el-form ref="form" :model="form">
      <el-descriptions :column="2" border>
        <template v-if="isShow">
          <el-descriptions-item
            label="社区戒毒"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="lydplxList">
              <el-checkbox-group v-model="form.sqjdList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_sjsk"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </el-descriptions-item>
          <el-descriptions-item
            label="社区康复"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_sjsk"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="重点关注人员"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_zdgz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="社戒社康总数"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_sjsk_total"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="工作站"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="比率信息"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="查获登记"
            :span="1"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="社戒/社康/重点关注"
            :span="1"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="禁毒宣传"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="双列管人员"
            :span="1"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="脱失脱管人员"
            :span="1"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item
            label="踏查"
            :span="2"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList">
              <el-checkbox-group v-model="form.jntcList">
                <el-checkbox
                  v-for="(item, index) in dict.type.tj_gzz"
                  :key="index"
                  :label="item.value"
                  >{{ item.label }}</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item></el-descriptions-item
          >
          <el-descriptions-item :span="2" label-class-name="hiderLabel">
            <div style="height: 30px"
          /></el-descriptions-item>
          <el-descriptions-item
            label="地区单位"
            :span="1"
            label-class-name="labelBg"
          >
            <el-form-item prop="jntcList"> <area-cascader /> </el-form-item
          ></el-descriptions-item>
          <el-descriptions-item
            label="时间段()"
            :span="1"
            label-class-name="labelBg"
          >
            <template slot="label">
              <div>
                时间段<span style="color: red">(仅对带</span>【时】<span
                  style="color: red"
                  >生效)</span
                >
              </div>
            </template>
            <el-form-item prop="jntcList">
              <el-date-picker
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              /> </el-form-item
          ></el-descriptions-item>
        </template>
        <el-descriptions-item :span="1" label-class-name="hiderLabel">
          <template slot="label" :colspan="0" />
          <div
            style="
              height: 30px;
              display: flex;
              align-items: center;
              padding-left: 45%;
            "
          >
            <div
              class="btnView"
              style="cursor: pointer"
              @click="isShow = !isShow"
            >
              <i
                :class="isShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                style="margin-right: 10px"
              />

              {{ isShow ? "隐藏统计条件" : "显示统计条件" }}
            </div>
          </div></el-descriptions-item
        >
      </el-descriptions>
    </el-form>
    <div style="margin: 20px 0; display: flex; justify-content: flex-end">
      <el-button type="primary" size="mini">导出EXCEL</el-button>
      <el-button type="primary" size="mini">打印</el-button>
      <el-button
        type="primary"
        size="mini"
        @click="currentTime = new Date().getTime()"
        >统计</el-button
      >
    </div>
    <SqjdEl
      dict-type="tj_sjsk"
      :check-list="form.sqjdList"
      :current-time="currentTime"
    />
    <SqkfEl />
  </div>
</template>
<script>
import { addUser, getUser, updateUser } from "@/api/user/userInfo";
import SqjdEl from "./components/sqjd";
import SqkfEl from "./components/sqkf";
export default {
  components: {
    SqjdEl,
    SqkfEl,
  },
  dicts: ["tj_sjsk_total", "tj_zdgz", "tj_gzz", "tj_gzz", "tj_sjsk"],
  props: {
    sjskId: {
      type: String,
    },
  },
  data() {
    return {
      isShow: true,
      // 按钮loading
      buttonLoading: false,
      currentTime: new Date().getTime(),
      // 表单参数
      form: {
        lydplxList: [],
        jntcList: [],
        sqjdList: [],
      },
    };
  },
  watch: {
    sjskId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          getUser(newV).then((res) => {
            if (res.data) {
              this.form = res.data;
            } else {
              this.reset();
            }
          });
        }
      },
    },
  },
  methods: {
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.id != null) {
            updateUser(this.form)
              .then((response) => {
                this.$modal.msgSuccess("修改成功");
                this.$emit("goto-next", 1);
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          } else {
            addUser(this.form)
              .then((response) => {
                this.$modal.msgSuccess("新增成功");
                this.$emit("goto-next", 1, response.sjskId);
              })
              .finally(() => {
                this.buttonLoading = false;
              });
          }
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        type: undefined,
        area: undefined,
        name: undefined,
        gender: undefined,
        mz: undefined,
        zzmm: undefined,
        height: undefined,
        idno: undefined,
        birthday: undefined,
        whcd: undefined,
        jdjg: undefined,
        jdsj: undefined,
        fzr: undefined,
        hjdpcs: undefined,
        hjd: undefined,
        hjdxz: undefined,
        jzdpcs: undefined,
        jzd: undefined,
        jzdxz: undefined,
        jyqk: undefined,
        gddh: undefined,
        mobile: undefined,
        hyzk: undefined,
        mqzt: undefined,
        sfyfmzj: undefined,
        flwsbh: undefined,
        ysdabh: undefined,
        ssjwq: undefined,
        lydplx: [],
        jntc: [],
        jds: undefined,
        fxdj: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
      };
      this.resetForm("form");
    },
  },
};
</script>
<style>
.labelBg {
  background: rgb(235, 245, 252) !important;
  color: #000 !important;
  width: 200px;
}

.hiderLabel {
  background: #fff !important;
  border-right: 1px solid #fff !important;
  width: 0 !important;
}
</style>
<style scoped>
.statisticsView .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
  padding: 0px;
}
.statisticsView /deep/ .el-input__inner {
  border: none !important;
}
.statisticsView /deep/ .el-form-item {
  margin-bottom: 0 !important;
}
.btnView:hover {
  color: rgb(102, 157, 252);
}
</style>
